// pages/charts/applybymon/applybymon.js

import http from '../../../utils/http.js';
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp();

function setOption(chart, data) {
  const option = {
    legend: {
      type: "plain",
      left: "center",
      top: "auto"

    },
    grid: {
      left: 10,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },

    xAxis: [{
        type: 'value',
        // splitNumber: 10,
      splitLine: {
        show: false
      },
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: '13',
        }
      }, {
        type: 'value',
        // splitNumber: 10,
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#777',
          fontSize: '13',
        }
      }


    ],
    yAxis: [{
        type: 'category',
        axisTick: {
          show: true
        },

        data: ['一月 ', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: '13',
        }
      }

    ],

    series: [{
        name: '开票数量(张)',
        type: 'bar',
        xAxisIndex: 0,
        label: {
          normal: {
            show: true,
            position: 'inside',
            rich: {}
          }
        },

        data: data.num,
        itemStyle: {
          color: '#0EC0FF',
          emphasis: {
            color: '#37a2da'
          }
        }
      },
      {
        name: '开票收入(元)',
        xAxisIndex: 1,
        type: 'bar',

        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'inside',
            rich: {}
          }
        },

        data: data.commission,
        itemStyle: {
          color: '#FFD700',
          emphasis: {
            color: '#32c5e9'
          }
        }
      },
    ]
  };
  chart.setOption(option);
}

Page({
  data: {
    index: 0,
    yearList: [],
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    isLoaded: false,
    isDisposed: false,
    chartData: {},
    selList:[],
    orgCode: '',
    year:'',
    codeIndex:0,
    codeData:[],
    isShowSel:false
  },
  onReady: function() {


  },
  onLoad: function() {
    this.getOrgCode();
   
  },

  // 获取市场
  getOrgCode:function(){
    wx.showLoading({
      title: '数据加载中...',
      mask: true
    })
    let that = this;
    http.request({
      url: '/auth/findOrgTree',
      data: {
        orgType: 4
      },
      success: (result) => {
        wx.hideLoading({});
        let selList = [];
        let selData =result;  
        let isShowSel = this.data.isShowSel;
        if (result.length > 1) {
          isShowSel = true;
        } else {
          isShowSel = false;
        }
        const all = {
          name: '全部',
          code: ''
        }
        selData.unshift(all);  // 讲全部字段加入首选
        for(let i =0;i<result.length;i++){
          selList.push(result[i].name);
        }

        that.setData({
          selList: selList,
          orgCode: result[0].code,
          codeData: result,
          isShowSel: isShowSel
        })
       
        let orgCode = this.data.orgCode;

        // 自定义年份
        let year = new Date().getFullYear();
        let d = [year - 2, year - 1, year, year + 1, year + 2];
        this.setData({
          yearList: d,
          index: 2,
          year: d[2]
        })
        // 获取组件
        this.ecComponent = this.selectComponent('#mychart-dom-bar');
        let idx = this.data.index;
        let inityear = this.data.yearList[idx];
        this.initChart(inityear, orgCode)
      }
    });
  },
  //加载图表
  initChart: function (year, orgCode) {
    http.request({
      url: '/applySummary/findApplyMonthStatistics',
      data: {
        "year": year,
        "orgCode": orgCode,
      },
      success: (res) => {
        this.setData({
          chartData: res
        });
        this.ecComponent.init((canvas, width, height) => {
          // 获取组件的 canvas、width、height 后的回调函数 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          setOption(chart, this.data.chartData);
          // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
          this.chart = chart;
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });
      }
    });
  },

  // 点击按钮后初始化图表
  bindYearChange: function(e) {
    let idx = e.detail.value;
    this.setData({
      index: idx
    })
    let year = this.data.yearList[idx];
    let orgCode = this.data.orgCode;
    this.setData({
      year: year
    })
    if (this.chart) {
      this.chart.dispose();
    }
    this.initChart(year, orgCode)
  },

  // 市场选择
  bindOrgCode: function (e) {
    let idx = e.detail.value;
    let codeData = this.data.codeData;
    let orgCode = this.data.orgCode;
    let year = this.data.year;
    this.setData({
      codeIndex: idx,
      orgCode: codeData[idx].code,
    })
    if (this.chart) {
      this.chart.dispose();
    }
    this.initChart(year, codeData[idx].code)
  },
  dispose: function() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
 
});